<template>
  <div id="appStatic">
  <h2>热门应用统计</h2>
  <v-chart :option="barOptions" style="height: 300px" />
  <h2>应用结果统计</h2>
  <v-chart :option="pieOptions" style="height: 400px" />
</div>

</template>

<script setup lang="ts">
import VChart from "vue-echarts";
import "echarts";

//柱状图 要用computed包裹 不然 list变化 不会更新
// const BarOptoins2 = computed(() => {
//   return {
//     xAxis: {
//       type: 'category',
//       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
//       // data: list.value.map(item => item.appID)
//       name: '应用 id'
//     },
//     yAxis: {
//       type: 'value',
//       name: '用户答案数'
//     },
//   }
// })
const barOptions = {
  tooltip: {
    trigger: 'item'
  },
  xAxis: {
    type: 'category',
    data: ['1', '3', '5', '7'],
    // data: list.value.map(item => item.appID)
    name: '应用 id'
  },
  yAxis: {
    type: 'value',
    name: '用户答案数'
  },
  series: [
    {
      data: [100, 80, 120, 50, 70, 90, 110],
      // data: list2.value.map(item => item.answerCount)
      type: 'bar'
    }
  ]
}

const pieOptions =  {

  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '应用答案结果分布',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '稳定可靠型-ISTJ' },
        { value: 735, name: 'ISFP(艺术家)' },
        { value: 580, name: 'INFP(治愈者)' },
        { value: 484, name: 'INFJ(占有者)' },
        { value: 300, name: 'ESTP(拓荒者)' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};


</script>


<style lang="scss" scoped>

</style>